<template>
  <div id='search'>
    <!-- 搜索框 -->
    <div class="searchBox">
      <input type="text" v-model="searchIpt" @keyup.enter="setSearch(searchIpt, limit, offset)">
      <button v-show="searchIpt" @click="setSearch(searchIpt, limit, offset)">搜索</button>
    </div>

    <!-- 热门搜索 -->
    <div class="hotSearch" v-show="!isSearch">
      <span class="title">热门搜索</span>
      <ul class="hotSearchList">
        <!-- 点击直接进行搜索 -->
        <li v-for="(item,i) in hotSearch" :key="i" @click="setSearch(item.searchWord, limit, offset);searchIpt =item.searchWord ">{{item.searchWord}}</li>
      </ul>
    </div>

    <!-- 歌曲列表 -->
    <div class="musicList" v-show="isSearch">
      <span class="title">音乐列表</span>

      <!-- 列表 -->
      <div class="musicListSongs">
        <!-- 每一项歌曲 -->
        <router-link class="playlistSongsItem" v-for="(item, i) in musicList" :key="i" :to="`/song/${item.id}`" tag="div">
          <!-- 歌曲信息 -->
          <div class="playlistSongsItemMusic">
            <!-- 歌名 -->
            <div class="musicName rowShows">{{item.name}}</div>
            <!-- 歌手 -->
            <div class="musicSinger rowShows">
              <span v-for="(ar,i) in item.ar" :key="i">
                {{ ar.name }}
                <i v-if="item.ar.length == 1"></i>
                <i v-else-if="item.ar.length-1 == i"></i>
                <i v-else>/</i>
              </span>
            </div>
          </div>

          <!-- 播放按钮 -->
          <div class="play">
            <i></i>
          </div>

        </router-link>

        <!-- 查看更多 -->
        <div class="viewMore" v-show="songCount !== musicList.length">
          <span @click="addMusicList(searchIpt, limit, offset)">查看更多</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 搜索
      searchIpt: '',
      // 是否搜索
      isSearch: false,
      // 热搜
      hotSearch: [],
      // 搜索的歌曲列表
      musicList: [],
      // 数量
      limit: 50,
      // 偏移量
      offset: 0,
      // 总数量
      songCount: -1
    }
  },
  created () {
    // 获取热搜
    this.$api.getHotSearch().then(res => {
      this.hotSearch = res.data
      console.log(this.hotSearch);
    })
  },
  watch: {
    searchIpt (a, b) {
      this.offset = 0
      if (a === '') {
        this.isSearch = false
        this.offset = 0
      }
    }
  },
  methods: {
    // 搜索
    setSearch (val, limit, offset) {
      this.$api.getSearch(val, limit, offset).then(res => {
        if (res.code === 200) {
          // 当前关键字搜索结果得总数量
          this.songCount = res.result.songCount
          // 将页面渲染到歌曲页面
          this.isSearch = true

          // 将获取到得歌曲保存
          this.musicList = res.result.songs

          // 修改偏移量
          this.offset += limit
        }
      })
    },

    addMusicList(val, limit, offset) {
     
      // 如果没有更多搜索结果，就直接退出
      if (this.songCount == this.musicList.length) {
        return
      }

      this.$api.getSearch(val, limit, offset).then(res => {
        if (res.code === 200) {
          // 将获取到得歌曲保存
           this.musicList.push(...res.result.songs)

          // 修改偏移量
          this.offset += limit
        }
      })
    }

  }
}
</script>

<style lang='less'>
// 搜索框
.searchBox {
  position: relative;
  width: 100vw;
  height: 10vw;
  margin: 2vw 0;

  input {
    width: 96vw;
    height: 10vw;
    margin: 0 2vw;
    padding: 0 20vw 0 6vw;
    outline: none;
    border: 1px solid red;
    box-sizing: border-box;
    border-radius: 5vw;
    font-size: 3.5vw;
  }
  button {
    position: absolute;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
    width: 14vw;
    height: 8vw;
    font-size: 2vw;
    border-radius: 4vw;
    border: 0;
    background-color: #aaa;
    color: #efefef;
  }
}

.title {
  display: block;
  padding: 0 2vw;
  font-size: 2.5vw;
  color: #999;
}

// 热搜
.hotSearch {
  .hotSearchList {
    display: flex;
    flex-wrap: wrap;

    li {
      padding: 2vw 4vw;
      background-color: #efefef;
      margin: 2vw;
      border-radius: 9vw;
      color: #666;
    }
  }
}

// 歌曲列表的每一项
.playlistSongsItem {
  padding: 1.5vw 1vw;
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  &:last-child {
    border-bottom: none;
  }

  // 歌曲信息
  .playlistSongsItemMusic {
    // 这里使用 flex:1; 的话就不能显示在一行了
    width: calc(100% - 11vw);
    padding: 2vw 4vw;
    box-sizing: border-box;

    .musicName {
      font-size: 3vw;
      color: #333;
    }
    .musicSinger {
      font-size: 2.5vw;
      color: #888;
      margin-top: 1vw;
    }
  }

  // 播放按钮
  .play {
    width: 9vw;
    margin-left: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;

    i {
      display: block;
      width: 6vw;
      height: 6vw;
      background-image: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=);
      background-repeat: no-repeat;
      background-size: 40vw;
      background-position: -5vw 0;
    }
  }
}

// 查看更多
.viewMore {
  width: 100vw;
  height: 8vw;
  line-height: 8vw;
  background-color: #eeeff0;
  text-align: center;
  color: #333;

  span {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 2.5vw;
  }
}
</style>
